<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>计算属性 vs Watched Property</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <div id="demo">{{ fullName }}</div>
  <script type="text/javascript">
  var demo = new Vue({
    el: "#demo",
    data: {
      firstName: "Foo",
      lastName: "Bar",
      // fullName: "Foo Bar"
    },
    // watch: {
    //   firstName: function(val) {

    //     this.fullName = val + ' ' + this.LastName
    //   },
    //   lastName: function(val) {
    //     this.fullName = this.firstName + ' ' + val
    //   }
    // },
    computed:{
      // 计算属性
      // fullName:function(){
      //   console.log(this.firstName);
      //   console.log(this.lastName);
      //   return this.firstName + ' ' + this.lastName
      // }    

      fullName:{
         get:function(){
          return this.firstName + ' '　+this.lastName
        },
        // 设置
        set:function(newValue){
          var names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[names.length - 1]
        }
      }  
    }

  });
  </script>
</body>

</html>
